<template>
	<view>
		<view class="main">
			<view class="main-box" v-for="item in dataSource" :key="item.id">
				<image class="full" :src="item.fourColorImage" @tap="previewImage(item.fourColorImage)">
				</image>
				<view class="title">{{item.name}}</view>
			</view>
			
		</view>
		<view class="empty-data" v-if="dataSource.length==0">
			<u-empty mode="data" :marginTop="100"></u-empty>
		</view>
		<view class="bottom-subside" style='height: 22px;'></view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				imageList: [],
				dataSource: []
			}
		},
		mounted() {
			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getList()
		},
		methods: {
			getList() {
				uni.$u.http.get(`/check/mobile/riskFourColorImage/fourColorImageList`).then(res => {
					if (res.code == 0) {
						this.dataSource = res.data
						if (res.data.length) {
							let arr = []
							res.data.map(item => {
								arr.push(item.fourColorImage)
							})
							this.imageList = arr
						}
						uni.stopPullDownRefresh()
					}
				}).catch(err => {})
			},
			//预览图片
			previewImage(e) {
				uni.previewImage({
					current: e,
					urls: this.imageList
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.main {
		padding: 16rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;


		.main-box {
			width: 47vw;
			margin-bottom: 16rpx;
			background: #fff;
			border-radius: 8rpx;

			image {
				width: 100%;
				height: 46vw;
				border-radius: 8rpx 8rpx 0px 0px;
				border: 1px solid #F5F5F5;

			}

			.title {
				padding: 24rpx 16rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				word-wrap: break-word;
				word-break: break-all;
			}
		}

	}
</style>
